<template>
  <div class="tabs-box mt20">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="专业概述" name="majorsummarize">
        <div class="sketch-info">
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/leve.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ majordetailData.eduLevelName || '-' }}</div>
              <div class="item f14">学历层次</div>
            </div>
          </div>
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/year.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ majordetailData.learnYearArab || '-' }}</div>
              <div class="item f14">修业年限</div>
            </div>
          </div>
          <div class="sketch f14">
            <div class="left-img">
              <img src="../../assets/images/xuewei.png" alt="" />
            </div>
            <div class="right-info">
              <div>{{ majordetailData.degree || '-' }}</div>
              <div class="item f14">授予学位</div>
            </div>
          </div>
          <div class="sketch">
            <div class="left-img">
              <img src="../../assets/images/bili.png" alt="" />
            </div>
            <div class="right-info">
              <div>
                {{ majordetailData.maleRatio || '-' }} :
                {{ majordetailData.femaleRatio || '-' }}
              </div>
              <div class="item f14">男女比例</div>
            </div>
          </div>
        </div>

        <!-- 专业介绍 -->
        <div class="item-box" v-if="treeActiveName == 'benke'">
          <mytitlebar title="专业介绍" />
          <div class="f14" style="color: #666">
            {{ majordetailData.introduction || '-' }}
          </div>
        </div>

        <!-- 培养目标 -->
        <div class="item-box">
          <mytitlebar title="培养目标" />
          <div class="f14" style="color: #666">
            {{ majordetailData.eduObjective || '-' }}
          </div>
        </div>

        <!--  培养要求 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '培养要求' : '实习实训'"
          />
          <div class="f14" style="color: #666">
            {{
              majordetailData.eduRequirement ||
              majordetailData.internshipDesc ||
              '-'
            }}
          </div>
        </div>

        <!-- 学科要求 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '学科要求' : '职业资格证书举例'"
          />
          <div class="f14" style="color: #666">
            {{
              majordetailData.subjectRequirement ||
              majordetailData.certExample ||
              '-'
            }}
          </div>
        </div>

        <!-- 知识能力 -->
        <div class="item-box">
          <mytitlebar title="知识能力" />
          <div
            class="f14"
            style="color: #666; white-space: pre-wrap"
            v-html="majordetailData.loreAndAbility"
          ></div>
        </div>

        <!-- 考研方向 -->
        <div class="item-box">
          <mytitlebar
            :title="treeActiveName == 'benke' ? '考研方向' : '专升本方向'"
          />
          <div class="f14" style="color: #666">
            {{
              treeActiveName == 'benke'
                ? majordetailData.studyDirection || '-'
                : treeActiveName == 'zhuanke'
                  ? majordetailData.zhuanToBenOrient || '-'
                  : '-'
            }}
          </div>
        </div>

        <!-- 主要课程 -->
        <div class="item-box">
          <mytitlebar title="主要课程" />
          <div class="f14" style="color: #666">
            {{ majordetailData.mainCourse || '-' }}
          </div>
        </div>

        <!-- 社会名人 -->
        <div class="item-box" v-if="treeActiveName == 'benke'">
          <mytitlebar title="社会名人" />
          <div class="f14" style="color: #666">
            {{ majordetailData.famousScholar || '-' }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开设院校" name="second">
        <schoolDate
          ref="schoolDateinfo"
          :studentId="requestData.studentId"
          :storeType="2"
        ></schoolDate>
        <div class="table-box" style="margin-top: 20px">
          <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="rank" label="专业排名" />
            <el-table-column label="院校信息" width="300">
              <template #default="scope">
                <div style="font-weight: bold">{{ scope.row.cnName }}</div>
                <span
                  class="f12"
                  v-for="item in scope.row.features"
                  :key="item"
                  >{{ item }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="address" label="所在地">
              <template #default="scope">
                {{ scope.row.provinceName }}&nbsp;{{
                  scope.row.cityName || '-'
                }}
              </template>
            </el-table-column>
            <el-table-column prop="natureTypeName" label="性质" />
            <el-table-column prop="belong" label="类型">
              <template #default="scope">
                {{ scope.row.categories[0] || '-' }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="学科评估" /> -->
            <el-table-column prop="hits" label="报考热度">
              <template #default="scope">
                {{ scope.row.hits / 10000 }}万
              </template>
            </el-table-column>
            <!-- <el-table-column prop="comScore" label="综合指数" /> -->
          </el-table>
          <div style="margin-bottom: 30px">
            <pagination
              v-show="total > 0"
              v-model:page="requestData.page"
              v-model:limit="requestData.pageSize"
              :total="total"
              :background="false"
              @pagination="fetchSearchMajorSchool"
            ></pagination>
          </div>
        </div>

        <!-- <el-tooltip content="Top center" placement="top" effect="light">
          <template #content>
            <div class="f14">
              <div>
                以下数据为全国所有开设“{{
                  route.query.name || "-"
                }}”专业的院校列表，根据易度排名结果展示。所列院校是否面向本省招生，请以最新招生计划为准。
              </div>
              <div>
                专业排名结果：取自
                <span
                  @click="handleOtherWeb"
                  class="curr"
                  style="color: #409eff"
                  >易度排名</span
                >
                最新发布的
                <span style="color: #409eff"
                  >2024中国大学专业排名</span
                >
                。
              </div>
              <div>
                学科评估结果：取自中国学位与研究生教育信息网全国第四轮学科评估结果（2016~2017）
                。
              </div>
            </div>
          </template>
          <div
            class="df"
            style="width: 100px"
          >
            <el-icon class="curr" style="margin-right: 5px"
              ><QuestionFilled
            /></el-icon>
            <span>数据说明</span>
          </div>
        </el-tooltip> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getSearchMajorSchool } from '@/api/appv2/appv1.js';
import mytitlebar from '../MyTitleBar.vue';
import schoolDate from '@/views/leader/volunteer/module/schoolDate.vue'; // 学校
import userSearch from '@/store/modules/searchInfoMajorTool.js';

const props = defineProps({
  majordetailData: {
    type: Object,
    default: () => {},
  },
  majorCode: {
    type: String,
    default: '',
  },
});

const userSearchVal = userSearch(); // 筛选仓库
let userSearchDate = computed(() => userSearchVal.searchArraylist); // 筛选数据
const total = ref('');
const tableData = ref([]);
const activeName = ref('majorsummarize');
const treeActiveName = ref('benke');
const screenData = ref({}); // 筛选数据
// 请求数据
const requestData = reactive({
  studentId: localStorage.getItem('student_id'),
  batch: '',
  page: 1,
  code: props.majorCode,
  pageSize: 10,
  fronttype: 3,
  fType: 0, // 0-全部
  hasZJ: 0, // 0-全部
  order: '', // 排序 chance-录取率 rank-院校排名 planNum-招生计划
  is_sort: false, // 是否升序，false升序，true降序
});

watch(
  // 监听院校筛选数据改变
  () => userSearchDate.value,
  () => {
    requestData.page = 1;
    schoolSearchDataChange();
  }
);
// 院校筛选数据改变
function schoolSearchDataChange() {
  let searchData = {
    province: [],
    categories: [],
    features: [],
    natureType: [],
    eduLevelSchool: [],
    schoolNewly: [],
    scode: [],
    mcode: [],
    zcode: [],
    ssearch: '',
    msearch: '',
    zsearch: '',
  };

  for (let item of userSearchDate.value) {
    switch (item.type) {
      case 'province':
        searchData.province.push(item.code);
        break;
      case 'type':
        searchData.categories.push(item.code);
        break;
      case 'school_feature':
        searchData.features.push(item.code);
        break;
      case 'nature':
        searchData.natureType.push(item.code);
        break;
      case 'school_type':
        searchData.eduLevelSchool.push(item.code);
        break;
      case 'schoolNewly':
        searchData.schoolNewly.push(item.code);
        break;
      case 'schoolSearch':
        searchData.scode.push(item.code);
        break;
      case 'major':
        searchData.mcode.push(item.code);
        break;
      case 'job':
        searchData.zcode.push(item.code);
        break;
      case 'ssearch':
        searchData.ssearch = item.name;
        break;
      case 'msearch':
        searchData.msearch = item.name;
        break;
      case 'zsearch':
        searchData.zsearch = item.name;
    }
  }

  let data = {
    province: searchData.province.toString(),
    categories: searchData.categories.toString(),
    features: searchData.features.toString(),
    natureType: searchData.natureType.toString(),
    eduLevelSchool: searchData.eduLevelSchool.toString(),
    schoolNewly: searchData.schoolNewly.toString(),
    scode: searchData.scode.toString(),
    mcode: searchData.mcode.toString(),
    zcode: searchData.zcode.toString(),
    ssearch: searchData.ssearch,
    msearch: searchData.msearch,
    zsearch: searchData.zsearch,
  };
  screenData.value = data;
  fetchSearchMajorSchool();
}
const fetchSearchMajorSchool = () => {
  let data = {
    ...requestData,
    ...screenData.value,
  };

  data['zy_type'] = 3;

  getSearchMajorSchool(data).then((res) => {
    if (res.code == 20000) {
      tableData.value = res.data;
      total.value = res.total;
    }
  });
};
const handleUpdateCollegeList = (code) => {
  requestData.code = code;
  fetchSearchMajorSchool();
};
const handleClick = (tab) => {
  activeName.value = tab.paneName;
};
fetchSearchMajorSchool();
defineExpose({
  handleUpdateCollegeList,
});
</script>

<style lang="scss" scoped>
.el-tabs {
  //   padding-bottom: 150px;
}
//   height: 100vh;
//   margin-bottom: 1000px;
.left-tree {
  width: 260px;
  margin-right: 30px;
}
.right-contaier {
  background: #fff7f4;
  height: 120px;
  flex: 1;
  .like-box {
    padding: 15px;
    height: 100%;
    justify-content: space-between;
  }
}
.my-btn {
  width: 80px;
  border-radius: 4px;
  justify-content: center;
  color: #409eff;
  border: 1px solid #409eff;

  &:hover {
    background: #409eff;
    color: #fff;
  }
}
.sketch-info {
  width: 780px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .sketch {
    display: flex;
    align-items: center;
  }
  .item {
    color: #9b9b9b;
    margin-top: 10px;
  }
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}
.item-box {
  margin: 40px 0;
}
.tabs-box {
  ::v-deep(.el-tabs__active-bar) {
    height: 0px !important;
  }
  ::v-deep(.el-tabs__nav-wrap::after) {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #409eff;
    z-index: #409eff;
  }
  ::v-deep(.is-active) {
    background: #409eff;
    color: #fff;
    border-radius: 4px;
  }
  ::v-deep(.el-tabs__item) {
    padding: 0 30px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeActive {
  color: #409eff;
}
.major-item:hover {
  color: #409eff;
}
</style>
